      <template>
        <div>
          <h1>所在班级学生考勤排行</h1>

          <input type="radio" name="ascOrDesc" v-model="ascOrDesc" :value="1"> 升序</input>
          <input type="radio" name="ascOrDesc" v-model="ascOrDesc" :value="-1">降序</input>
        </div>


        <table>
          <thead>
            <tr>

              <th>学号</th>
              <th>学生</th>
              <th>分数</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in scores">
              <td>{{ item.number }}</td>
              <td>{{ item.name }}</td>
              <td><a href="">{{ item.score }}</a></td>
            </tr>
          </tbody>
        </table>

      </template>
<script>

import { mapActions } from 'pinia'
import { useAttenderStore } from '../../stores/attender'
import _ from 'lodash'
export default {
  inject: ['axios'],

  methods: {
    ...mapActions(useAttenderStore, ['fetchScoresOfStudentsByClazzId']),
  },

  async mounted() {
    this.list = await this.fetchScoresOfStudentsByClazzId();
  },

  data() {

    return {
      list: []//[{id:1,number:2302020034,name:'张三',score:10}]
      , ascOrDesc: 1//如果是升序就代表asc，false代表desc
    }
  },
  computed: {
    scores() {
      return _.sortBy(this.list, item => Number(this.ascOrDesc) * item.score);
    }
  }
}
</script>


<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
